window.addEventListener("load", function () {
	// 思路:
	// 获取相关节点
	// $("#apiList li");
	// 给li绑定移入和移出事件
	let oldUrl = "";
	console.log($(".api-img div"));
	$(".api-img div").forEach(function (v) {
		console.log(v);
		// 移入事件
		v.addEventListener("mouseover", function () {
			// 背景色变蓝
			v.style.backgroundColor = "#2f7ee9";
			// 文字变白
			v.style.color = "#fff";
			// 切换透明图片
			//将图片的后缀名前加-c
			let imgUrl = this.firstElementChild.src;
			this.firstElementChild.src = imgUrl.replace(".svg", "-c.svg");
			oldUrl = imgUrl; //用一个变量保存原先的路径
		});
		//移出事件
		v.addEventListener("mouseout", function () {
			v.style.backgroundColor = "#fff";
			v.style.color = "#000";
			// 切换原先的照片
			this.firstElementChild.src = oldUrl;
		});
	});
	// 独角兽区轮播图
	// 思路:将多个图文结构unicornCont全部叠在一个区域,每隔3s换一张
	// 1.获取相关节点
	const unicornConts = $(".unnext");
	console.log($(".unnext"));
	unicornConts[0].style.opacity = "1"; //默认显示第0个
	let index = 1; //设置索引变量
	// 2.设置周期定时器每隔3秒显示
	this.window.setInterval(function () {
		// 3.排他思想,不管当前谁显示,每一个周期都让所有消失
		unicornConts.forEach(function (v) {
			v.style.opacity = "0";
		});

		// 4.通过索引显示对应内容,其他不显示
		unicornConts[index].style.opacity = "1";
		// 5.每隔一个周期索引变量++
		index++;
		// 6.当索引达到最大限度时要回复初始状态
		if (index > unicornConts.length - 1) {
			index = 0;
		}
	}, 3000);

	var mySwiper = new Swiper(".swiper", {
		autoplay: true, //可选选项，自动滑动
		pagination: {
			el: ".swiper-pagination",
			clickable: true,
		},
	});

	//如果你初始化时没有定义Swiper实例，后面也可以通过Swiper的HTML元素来获取该实例
	new Swiper(".swiper");
	var mySwiper = document.querySelector(".swiper").swiper;
	mySwiper.slideNext();
});

// 点击api实现跳转
$(".apidoc").addEventListener("click", function () {
	window.open("../html/api-index.html");
});
